<template>
<div>

  <h1>List</h1>

  <h1 v-show="lists.length === 0">nothing here~</h1>

  <div
      v-show="isShow === true"
      v-for="(item,index) in lists"
      :class="[{'active__item' : index === current_item }]"  @click="choose(index)"
      class="bg-gray-200 m-2 p-2 ">
    <h1>{{item.title }}</h1>
    <p>{{item.content}}</p>
    <hr>
    <p>{{item.time }}</p>
    <button @click="show_detail(item)">show info</button>
  </div>

  <Detail  v-show="isShow === false"  @back___event="()=>{this.isShow = true}"  :data___="item___data"  />

</div>
</template>

<script>
import Store from '../store/index'
import Detail from "../components/Detail";
export default {
  name: "List",
  data(){
    return{
      isShow:true,
      item___data:{},
      current_item:0
    }
  },
  components:{
    Detail
  },
  computed:{
    lists(){
      return Store.state.lists
    }
  },
  methods:{
    show_detail(item){
      this.isShow = false
      this.item___data = item
    },
    choose(index){
      this.current_item  = index
    }
  }
}
</script>

<style scoped>

</style>
